<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
    <script>
        // var num=1;//var 声明的变量,也是window的属性
        // console.log(num);//1
        // console.log(window.num);//1

        // function fn(){//函数是window的方法
        //     console.log("kunkun");
        // }
        // fn()
        // window.fn()
    </script>

    一,函数内部的方法,都是用来改变this的指向
    1.call
    `call`方法是附加在函数调用后面使用,可以忽略函数本身的this指向
    语法:函数名.call(要改变的this指向,要给函数传递的参数1,要给函数传递的参数2,....)

    <hr>
    <script>
        // var num=10;
        // var obj={
        //     num:100
        // }

        // function sum(a,b){
        //     console.log(this.num+a+b);//
        //     console.log(this.num);//
        //     console.log(a);//
        //     console.log(b);//
        // }
        // sum(2,3);//this---window 
        // sum.call(obj,2,3);//this--obj 
    </script>

    2.apply
    `apply`方法是附加在函数调用后面使用的,可以忽略函数this指向 
    语法 :函数名.apply(要改的this指向,[要给函数参数传递的参数1,要给函数参数传递的参数2,要给函数参数传递的参数3,.....])
    <script>
        // var num=10;
        // var obj={
        //     num:100
        // }

        // function sum(a,b){
        //     console.log(this.num+a+b);
        // }
        // sum(2,3)//this---window
        // sum.apply(obj,[4,5]); //this--obj 100+4+5
    </script>

    3.bind 
    `bind`方法是附加在函数调用后面使用的,可以忽略本身函数this指向 
    和call和apply有一些是不一样的,就是不会立即执行函数,而是返回一个已经改变了this指向的函数
    语法:`var newFn=函数名.bind(要改变的this指向);newFn(传递参数)`
    注意:返回的是一个函数体,需要再次调用 

    <script>
        // var num=10;
        // var obj={
        //     num:100
        // }

        // function sum(a,b){
        //     console.log(this.num+a+b);
        // }
        // sum(2,3)//this---window
        // // alert(sum.bind(obj,4,5)); //function () { [native code] }得到是一个没有名字的函数体
        // sum.bind(obj,4,5)();//this---obj 100+4+5=109
        // sum.bind(obj)(4,5);//this---obj 100+4+5=109
    </script>

    案例:点击li,3s之后,li里面的内容发生改变,变成2222
    <script>
        // var list=document.querySelectorAll('li');
        // for(var i=0;i<list.length;i++){
        //     list[i].onclick=function(){//this指向list[i]
        //         // window.setInterval(function(){
        //         //     this.innerHTML="2222";//this指向变成window,所以不生效了
        //         // },3000)

        //         // 所以要改变this的指向,要让他指向list[i]
        //         window.setInterval(function(){
        //             this.innerHTML="2222";
        //         }.bind(this),3000)   //this外层指向li
        //         // console.log(this);
        //     }
            
        // }
    </script>

    <script>
        // 通常将需要用到this储存为变量,后续调用--通用 
        var list=document.querySelectorAll('li');
        for(var i=0;i<list.length;i++){
            list[i].onclick=function(){
                var _this=this;
                window.setInterval(function(){
                    _this.innerHTML="2222"
                },3000);  //this:外层的this 指向li
            }
        }
    </script>



</body>
</html>